<template>
  <div style="height:90%;">
    <bread-crumb :breadInfoList="breadInfoList"></bread-crumb>
    <common-card>
      <normal-filter slot="card-info" :filterProps="filterProps" />
      <common-table
        slot="card-info"
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        @currentPage="goCurrent($event,currentIndex)"
      >
      </common-table>
    </common-card>
  </div>
</template>
<script>
import breadCrumb from "@/components/commonBreadCrumb";
import commonCard from "@/components/commonCard";
import commonTable from "@/components/commonTable";
import normalFilter from "@/components/normalFilter";
import commonUpload from "@/components/commonUpLoad";
import News from "@/api/news";
import Common from "@/api/common";
import apiConfig from "@/utils/apiConfig";
import moment from "moment";

const {api}=apiConfig
export default {
  data() {
    const { api } = apiConfig;
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "accountId",
          title: "账户ID",
          placeholder: "请输入"
        },
        {
          type: "input",
          id: "memberId",
          title: "归属会员ID"
        }
      ],
      onFilterChange: value => {
        this._initForm();
        let queryParam = JSON.parse(JSON.stringify(this.queryParam));

        if (value) {
          for (let key in value) {
            queryParam[key] = value[key];
          }
        }
        this.getNewsList(queryParam);
      },
      reSet: () => {
        this._initForm();
        this.getNewsList(this.queryParam);
      }
    };
    const columnProps = [
      {
        title: "账户ID",
        dataIndex: "accountId",
        key: "accountId",
        width: "180px"
      },
      {
        title: "归属会员ID",
        dataIndex: "memberId",
        key: "memberId"
      },
      {
        title: "当前账户余额",
        dataIndex: "balance",
        key: "balance",
        width: "180px"
      }
    ];
    return {
      breadInfoList: ["账户中心", "账户查询"],
      filterProps,
      columnProps,
      tableData: [],
      dialogFormVisible: false,
      isLoading: false,
      dialogType: "add",
      newsId: "",
      form: {
        desc: "",
        content: "",
        title: "",
        imglist: []
      },
      queryParam: {
        limit: 5,
        order: "DESC",
        start: 0,
        sort: "createTime"
      },
      pagination: {
        totalElements: 0,
        pageIndex: 1,
        pageSize: 10
      },
      myFileList: []
    };
  },
  async created() {
    this.pagination["pageSize"] = this.queryParam["limit"];
    this.getNewsList(this.queryParam);
  },
  methods: {
    showAddArticalModal() {
      this.dialogFormVisible = true;
    },
    async onOk(formName) {
      console.log(this.$refs.myUpload.imglist, this.form["imglist"]);
      this.$refs[formName].validate(async valid => {
        if (!valid) {
          return false;
        } else {
          //按钮开始出现loading
          this.isLoading = true;
          let data =
            this.dialogType === "add"
              ? await News.addNewsArtical(this.form)
              : await News.updateNewsArtical(this.newsId, this.form);
          if (data.success) {
            this.isLoading = false;
            this.dialogFormVisible = false;
            console.log(this.form["imglist"]);
            this.myFileList = this.form["imglist"];

            this._initForm();
            this.getNewsList(this.queryParam);
            this.$message({
              message: "保存文章成功!",
              type: "success"
            });
            this.myFileList = [];
          } else {
            this.$message.error("保存文章失败!");
          }
        }
      });
    },
    async getNewsList(queryParam) {
      let data = await News.getNewsList(queryParam);
      if (data && data.content) {
        console.log(data);
        data.content.forEach(item => {
          item.createTime = moment(item.createTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
        this.tableData = data.content;
        this.queryParam.start === 0
          ? (this.pagination["totalElements"] = data.totalElements)
          : null;
      }
    },
    goCurrent(currentIndex) {
      let queryParam = this.queryParam;
      queryParam.start = currentIndex - 1;
      this.pagination["pageIndex"] = currentIndex;
      this.getNewsList(queryParam);
    },
    modifyContent(row) {
      this.$router.push({ path: `/news/grid/update/${row.id}`, query: {} });
    },
    imglistChange(val) {
      console.log(val);
      this.form["imglist"] = val;
    },
    async deleteContent(row) {
      let apiData={
        id:row.id
      }
      let data = await News.delNewsItem(apiData);
      data.success?this.getNewsList(this.queryParam):null;
    },
    _initForm() {
      this.form = {
        desc: "",
        content: "",
        title: "",
        imglist: []
      };
      this.queryParam = {
        limit: 5,
        order: "DESC",
        start: 0,
        sort: "createTime"
      };
      this.pagination["pageIndex"] = 1;
    },
    _initAll() {
      this.$refs["form"].resetFields();
      this.form["imglist"] = [];
      this.myFileList = [];
      this._initForm();
    }
  },
  components: {
    breadCrumb,
    commonCard,
    commonTable,
    normalFilter,
    commonUpload
  }
};
</script>
<style lang='scss'>
.add-btn {
  text-align: left;
  margin-bottom: 20px;
}
.el-textarea .el-textarea__inner {
  height: 100px;
}
</style>